import { Button, Image, message } from "antd";
import { cloneDeep } from "lodash";
import { useState, useCallback, useEffect } from "react";
import { removeSpacesAndConvertToLowerCase } from "../../utils";
export const useSkuColumns = ({
	sizeSelectTableData,
	setSizeSelectTableData,
	handleStoreInfoSelectCommand,
	renderMerge,
	colWidth
}) => {
	const handleCommand = useCallback(
		(TEXT, record) => {
			switch (TEXT) {
				case "一键匹配":
					setSizeSelectTableData(pre => {
						const d = cloneDeep(pre);
						d.forEach(item => {
							const sysSpecs = removeSpacesAndConvertToLowerCase(item.sysSpecs);
							Object.keys(item).forEach(key => {
								// 尺码下拉项
								if (key.includes("Options") && Array.isArray(item[key])) {
									item[key].find(optionValue => {
										const _ov = removeSpacesAndConvertToLowerCase(optionValue);
										if (sysSpecs == _ov) {
											const storeId = key.replace("Options", "");
											item[storeId] = _ov;
										}
									});
								}
							});
						});

						return cloneDeep(d);
					});

					break;
				case "清空":
					handleStoreInfoSelectCommand(record, false);
					break;
			}
		},
		[sizeSelectTableData]
	);

	const defaultColumnsFn = useCallback(
		() => [
			{
				name: "图片",
				code: "image",
				width: colWidth.image,
				render: (v, record, i) => (record.image ? record.merge ? renderMerge(record) : <Image className="auto" src={v} /> : ""),
				getCellProps(value, record, rowIndex) {
					if (record.merge) {
						return {
							colSpan: 4,
							rowSpan: 1,
							style: { padding: "0" }
						};
					}
				}
			},
			{
				name: "颜色",
				code: "colour",
				width: colWidth.colour
			},
			{
				name: "供应商商品",
				code: "storeInfoRender",
				width: colWidth.storeInfoRender,
				render: (value, record, rowIndex) => {
					return value ? value : "未匹配";
				}
			},

			{
				lock: true,
				code: "action",
				width: colWidth.action,
				name: "操作",
				align: "center",
				render(_, record) {
					return record.storeInfoRender && record.image ? (
						<>
							<Button type="link" onClick={() => handleCommand("一键匹配", record)}>
								一键匹配
							</Button>
							<Button type="link" onClick={() => handleCommand("清空", record)}>
								清空
							</Button>
						</>
					) : (
						""
					);
				}
			}
		],
		[handleCommand, renderMerge]
	);

	const [columns, setColumns] = useState(defaultColumnsFn());

	useEffect(() => {
		setColumns(defaultColumnsFn());
	}, [sizeSelectTableData]);

	return {
		columns,
		setColumns
	};
};
